<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>sign</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <link href="css/weui.css" rel="stylesheet" type="text/css"/>
    <link href="css/reset.css" rel="stylesheet" type="text/css"/>
    <link href="css/header.css" rel="stylesheet" type="text/css"/>
    <link href="css/index.css" rel="stylesheet" type="text/css"/>
    <link href="fonts/iconfont.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="css/remark.css">
    	
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/index.js" ></script>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=90370be79add92086e64847a158e0a61"></script>
    
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script type="text/javascript" src="js/sha1.js"></script>
	<script type="text/javascript" src="js/wx_sdk.js"></script>
	
</head>

<body onload="showTime()">
<div class="page_index">
	<header>
    	<div class="hl hbtn">
        	<div class="h_right iconfont icon-jiantou1">返回</div>
        </div>
    	<h1>上下班考勤</h1>
        <div class="hr hbtn">
        	<div class="h_right">记录</div>
        </div>
    </header>
    
    <div class="content">
    	<div class="sign_con">
        	<p class="sign_conp_1"><span class="time_sp" id="time_now">00:00</span><span class="tit_sp">打卡异常请备注！</span></p>
            <p class="sign_conp_2">
				<span class="adr_sp">
				<i class="iconfont icon-ditu"></i>
				<strong class="adr_st" id="address"></strong></span>
				<span class="iconfont icon-shuaxin shua_sp"></span>
			</p>
        </div>
        <div class="signbtn">
            <a id="sign" href="javascript:;" class="weui_btn weui_btn_primary grey">上下班打卡</a>
        </div>
        <div class="weui_dialog_confirm">
            <div class="weui_mask"></div>
            <div class="weui_dialog">
                <div class="weui_dialog_hd"><strong class="weui_dialog_title">上下班打卡</strong></div>
                <div class="weui_dialog_bd">
                	<p class="dialog_time">00:00</p>
                    <p class="dialog_address">趋亚科技</p>
                </div>
                <div class="weui_dialog_ft">
                    <a href="#" class="weui_btn_dialog default reason">备注</a>
                    <a href="#" class="weui_btn_dialog primary confirm">确定打卡</a>
                </div>
            </div>
        </div>
        <div id="toast" style="display: none;">
            <div class="weui_mask_transparent"></div>
            <div class="weui_toast">
                <i class="weui_icon_toast"></i>
                <p class="weui_toast_content">已打卡</p>
            </div>
        </div>
    </div>
</div>

<div class="page_remark" style="display:none;">
	<header>
		<div class="hl hbtn back">
        	<div class="h_right iconfont icon-jiantou1">返回</div>
        </div>
    	<h1>备注</h1>
        <div class="hr hbtn">
        	<div class="h_right">确定</div>
        </div>
	</header>
	<div class="content">
		<div class="remark_wrapper">
			<textarea id="remark" autofocus placeholder="添加备注"></textarea>
			<div id="pictures">
				<div id="showPics"></div>
				<div id="photo"><span class="iconfont  icon-xiangji"></span></div>
			</div>
		</div>	

		<div class="signbtn">
            <a id="sign_remark" href="javascript:;" class="weui_btn weui_btn_primary">完成备注并提交打卡</a>
        </div>	
	</div>
</div>
    
    <script>	
		var Lng='';
		var Lat='';
		var distance='';
		var Address='';
		var mytime='';
		var time_day='';
		var time_year='';
		var code='';//给后台获取ID编码
		var mediaId=[];//传给后台
		var remark='';//备注信息
		var j=0;
		var num = 1-$('.picture').length;
		var localIds;

		
		
		
		//alert(window.location.href);

		//点击刷新
		$(".shua_sp").click(function(){
			$(this).addClass("shuaxin_animate");
			$(".adr_st").text("正定位...");
			$(".adr_st").css("color","#999");
			//map();
			setTimeout(function(){
				//alert("123");
				mapFunction();
				$(".shua_sp").removeClass("shuaxin_animate");
				$(".adr_st").css("color","#333");
			}, 2000);							
		});
		
		
		//点击遮罩退出
		$(".weui_mask").click(function(){
			$(".weui_dialog_confirm").css("display","none");
		});
		
		//点击确认打卡
		$(".confirm").click(function(){
			$(".weui_dialog_confirm").css("display","none");
			getAjax_savemessage();
		});
		
		
		//跳转打卡记录页面
		$(".hr").click(function(){
			window.location="history.html";
		});

		//点击备注
		$(".reason").click(function(){
			clearRemark();
			$(".page_index").css("display","none");
			$(".page_remark").css("display","block");
		});	

		//点击备注button打卡
		$(".page_remark #sign_remark").click(function(){
			remark=document.getElementById("remark").value;
			getAjax_savemessage();
			$(".page_index").css("display","block");
			$(".page_remark").css("display","none");
			$(".weui_dialog_confirm").css("display","none");
		})

		//点击返回主页面
		$(".page_remark .back").click(function(){
			$(".page_index").css("display","block");
			$(".page_remark").css("display","none");
		});

		//点击打开微信接口调用照相机图片上传
	 	$("#photo").on("click",function(){
			wx.ready(function () {
	        // 在这里调用 API
	        	wx.checkJsApi({
	        		jsApiList: [
	        			"chooseImage",
	        			"uploadImage"
	        		],
	        		success: function (res) {
	        		//alert(JSON.stringify(res));
	        		// alert(JSON.stringify(res.checkResult.getLocation));
	        			if (res.checkResult.getLocation == false) {
	        			    alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
	        			    return;
	        			}
	        		}
	    		});

				
	    		wx.chooseImage({
	    			count: num, // 默认9
	    			sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
	    			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
	    			success: function (res) {
	        			localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
						for (var i=0; i<localIds.length; i++){
							$("#showPics").append('<img src="'+localIds[i]+'" class="picture">');
						}
						if ($('.picture').length == 1){
							$("#photo").hide();
						}
						//上传图片
						syncUpload(localIds);
		
	        		}
	    		});

			});
		});

	 	//上传图片
		var syncUpload = function(localIds){
		    var localId = localIds.pop();
		    wx.uploadImage({
		    	localId: localId,
		    	isShowProgressTips: 1,
		    	success: function (res) {
		      		var serverId = res.serverId; // 返回图片的服务器端ID
		      		mediaId[j]=serverId;
		      		//alert(mediaId[j]);
		      		j++;
		      		//其他对serverId做处理的代码
		      		if(localIds.length > 0){
		       			syncUpload(localIds);
		       		}
		      	}
		    });
		}

	 	//图片预览
		$('#showPics').on("click",function(){
			var url= [];
			for (var i = 0; i < $('.picture').length; i++) {
				url[i] = $('.picture')[i].src;
			}
			wx.ready(function(){
				wx.previewImage({
	    		// current: curr, // 当前显示图片的http链接
	    		urls: url // 需要预览的图片http链接列表
				});
			});
	    });

		//清空备注
		var clearRemark = function (){
			mediaId=[];//传给后台
			remark='';//备注信息
			j=0;
			document.getElementById("remark").value='';
			$("#showPics img").remove();
			$("#photo").show();
		}

		mapFunction();
		
    </script>

    <script src="js/jweixin-1.0.0.js" ></script>
	<script src="js/zepto.min.js" ></script>
</body>
</html>
